<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>文章管理</el-breadcrumb-item>
      <el-breadcrumb-item>随笔管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row :gutter="30">
        <el-col :span="7">
          <el-input placeholder="请输入内容">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
          <span>功能暂未开发</span>
        </el-col>
      </el-row>
      <el-table :data="bloglist" stripe>
        <el-table-column type="index" width="30"></el-table-column>
        <el-table-column label="文章标题" prop="title" width="200"></el-table-column>
        <el-table-column label="创作日期" prop="create_time" width="150"></el-table-column>
        <el-table-column label="是否发布" prop="published" width="110"></el-table-column>
        <el-table-column label="操作">
          <template v-slot:default="scope">
            <el-button @click="View(scope.row.id)" size="small">查看</el-button>
            <el-button type="success" @click="Update(scope.row.id)" size="small">编辑</el-button>
            <el-button @click="Delete(scope.row.id)" type="primary" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-size="size"
        layout="total, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      bloglist: [{
        id: '1',
        title: 'Java',
        create_time: '2020-06-17 14:34',
        published: '草稿'
      }],
      current: 0,
      size: 1,
      total: 1,
      tagType: ['', 'success', 'info', 'warning', 'danger']
    }
  },
  created () {

  },
  methods: {
    handleCurrentChange (currentPage) {
      this.current = currentPage
    },
    edit_blog (id) {
      this.editDialogVisible = true
    },
    blogStateChange (id) {},
    addDialogClosed () {
      this.$refs.blogFormRef.resetFields()
    },
    editDialogClosed () {
      this.$refs.editblogFormRef.resetFields()
    },
    deleteblog (id) {
    },
    View (id) {

    },
    Delete (id) {

    },
    Update (id) {

    }
  }
}
</script>

<style lang="less" scoped>
.tag_row{
  display: flex;
}
</style>
